<template>
    <div class="main">
        <el-form :model="form" label-width="200px">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>基础设置</span>
                    </div>
                </template>
                <el-form-item label="添加店员是否关注公众号">
                    <el-switch v-model="form.addPayOfficialAccount" active-value="0" inactive-value="1" />
                </el-form-item>
                <el-form-item label="店铺样式">
                    <el-radio-group v-model="form.shopStyle" @change="radioChange">
                        <el-radio label="轮播样式" value="0" />
                        <el-radio label="列表样式" value="1" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="大家喜欢" v-if="form.shopStyle == '1'">
                    <el-radio-group v-model="form.allLike" @change="radioChange">
                        <el-radio label="显示" value="0" />
                        <el-radio label="隐藏" value="1" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="好店样式">
                    <el-radio-group v-model="form.goodShopStyle">
                        <el-radio label="v1样式" value="0" />
                        <el-radio label="v2样式" value="1" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="好店详情-更多门店">
                    <el-radio-group v-model="form.goodShopMoreShop">
                        <el-radio label="展示" value="0" />
                        <el-radio label="不展示" value="1" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否隐藏订单管理核销码">
                    <el-radio-group v-model="form.hideOrdermanagerVfcode">
                        <el-radio label="开启" value="1" />
                        <el-radio label="关闭" value="0" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="新版好店列表名称显示">
                    <el-checkbox-group v-model="form.newGoodShopDisname">
                        <el-checkbox label="商家名称" name="type" value="商家名称" />
                        <el-checkbox label="门店名称" name="type" value="门店名称" />
                    </el-checkbox-group>
                </el-form-item>
            </el-card>

            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>入驻设置</span>
                    </div>
                </template>
                <el-form-item label="商家入驻">
                    <el-switch v-model="form.storeIn" active-value="1" inactive-value="0" />
                    <div style="margin-left: 30px;">
                        默认开启，关闭以后商家将无法在前端申请入驻
                    </div>
                </el-form-item>
                <el-form-item label="入驻表单内容">
                    <div style="width: 400px;">
                        <table style="width: 100%;">
                            <thead style="background-color: rgb(102 102 102 / 23%);">
                                <td style="width: 50%;text-align: center;">内容</td>
                                <td style="width: 50%;text-align: center;">是否启用</td>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="width: 50%;text-align: center;">店铺名称</td>
                                    <td style="width: 50%;text-align: center;">
                                        <el-switch v-model="form.storeName" active-value="1" inactive-value="0"
                                            disabled />
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 50%;text-align: center;">姓名</td>
                                    <td style="width: 50%;text-align: center;">
                                        <el-switch v-model="form.name" active-value="1" inactive-value="0" disabled />
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 50%;text-align: center;">电话</td>
                                    <td style="width: 50%;text-align: center;">
                                        <el-switch v-model="form.phone" active-value="1" inactive-value="0" disabled />
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 50%;text-align: center;">所在地区</td>
                                    <td style="width: 50%;text-align: center;">
                                        <el-switch v-model="form.area" active-value="1" inactive-value="0" />
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 50%;text-align: center;">详细地址</td>
                                    <td style="width: 50%;text-align: center;">
                                        <el-switch v-model="form.address" active-value="1" inactive-value="0" />
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 50%;text-align: center;">店铺资质</td>
                                    <td style="width: 50%;text-align: center;">
                                        <el-switch v-model="form.storeAp" active-value="1" inactive-value="0" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </el-form-item>
                <el-form-item label="提交申请后跳转页面">
                    <div>
                        <el-radio-group v-model="form.applicationRedirectPage" @change="descChange">
                            <el-radio label="首页" value="0" />
                            <el-radio label="个人中心(默认)" value="1" />
                            <el-radio label="自定义" value="2" />
                        </el-radio-group>
                        <el-input v-model="form.customize" v-if="form.applicationRedirectPage == '2'" />
                    </div>
                </el-form-item>
                <el-form-item label="默认地区">
                    <div class="cascaderDiv">
                        <el-cascader v-model="form.defaultArea" :options="options" @change="handleChange" clearable
                            :props="props" />
                    </div>
                </el-form-item>
                <el-form-item label="商家服务协议">
                    <div style="width: 80%;">
                        <Wangeditor @closeOK="closeOKData" :row="form.storeServiceContract"></Wangeditor>
                    </div>
                </el-form-item>

            </el-card>

            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>商家入驻分享设置</span>
                    </div>
                </template>
                <el-form-item label="分享标题">
                    <el-input v-model="form.shareTitle" />
                </el-form-item>
                <el-form-item label="模板变量">
                    <div>
                        <span style="color: #409eff;cursor: pointer;" @click="copyData('[平台名称]')">[平台名称]</span>
                        <span style="margin-left: 20px;color: #409eff;cursor: pointer;"
                            @click="copyData('[用户昵称]')">[用户昵称]</span>
                        <div>点击复制</div>
                    </div>
                </el-form-item>
                <el-form-item label="分享描述">
                    <el-input v-model="form.shareDescription" />
                </el-form-item>
                <el-form-item label="模板变量">
                    <div>
                        <span style="color: #409eff;cursor: pointer;" @click="copyData('[平台名称]')">[平台名称]</span>
                        <span style="margin-left: 20px;color: #409eff;cursor: pointer;"
                            @click="copyData('[用户昵称]')">[用户昵称]</span>
                        <div>点击复制</div>
                    </div>
                </el-form-item>
                <el-form-item label="封面图">
                    <div>
                        <Upload :row="form.coverImage" @OK="OKdata"></Upload>
                        <div>
                            大小2M以下,建议尺寸200×200px
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="小程序封面图">

                    <div>
                        <Upload :row="form.appletCoverImage" @OK="OKdata1"></Upload>
                        <div>
                            大小2M以下,建议尺寸500×400px
                        </div>
                    </div>
                </el-form-item>
            </el-card>

            <el-form-item style="position: fixed;bottom: 0;left: 50%;transform: translate( -50% 0);">
                <el-button type="primary" @click="onSubmit">保存</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import Wangeditor from '@/components/wangeditor/index.vue'
import { ElMessage } from 'element-plus'
import Upload from '@/components/elUpload/index.vue'
import { getTree, getBaseList, baseUpdate } from '@/api/settings.js'


const form = reactive({
    addPayOfficialAccount: '0',
    shopStyle: '0',
    allLike: '0',
    goodShopStyle: '0',
    goodShopMoreShop: '0',
    hideOrdermanagerVfcode: '0',
    newGoodShopDisname: [],
    storeIn: '0',
    storeName: '1',
    name: '1',
    phone: '1',
    area: '1',
    address: '1',
    storeAp: '1',
    applicationRedirectPage: '1',
    customize: '',
    storeServiceContract: '',
    shareTitle: '',
    shareDescription: '',
    coverImage: '',
    appletCoverImage: '',
    defaultArea: [],
})

const props = reactive(
    {
        value: 'cityName',
        label: 'cityName',
        children: 'children',
    }
)

const options = reactive([])
// 店铺样式
const radioChange = (value) => {
    console.log(value);

}
// 提交申请后跳转页面
const descChange = (value) => {
    console.log(value);
}
// 默认地区
const handleChange = (value) => {
    console.log(value, form.defaultArea)
}
// 商家服务协议
const closeOKData = (value) => {
    form.storeServiceContract = value
}
// 复制
const copyData = (value) => {
    const input = document.createElement('input') // 创建一个input
    input.setAttribute('readonly', 'readonly') // 设置为只读
    input.setAttribute('value', value) // 设置值 
    document.body.appendChild(input) // 将input添加到页面
    input.select() // 选中input中的文本
    document.execCommand('copy') // 执行复制操作
    document.body.removeChild(input) // 移除input元素
    // 提示复制成功
    ElMessage.success('复制成功')
}
// 图片上传
const OKdata = (value) => {
    form.coverImage = value
}
// 图片上传
const OKdata1 = (value) => {
    form.appletCoverImage = value
}

// 保存
const onSubmit = () => {
    if (form.defaultArea != undefined && form.defaultArea.length > 0) {
        form.defaultArea = form.defaultArea.join(',')
    } else {
        form.defaultArea = ''
    }

    baseUpdate(form).then(res => {
        if (res.code == 200) {
            ElMessage.success('保存成功')
            getList()
        }
    })
}
// 获取数据
const getList = () => {
    getBaseList().then(res => {
        if (res.code == 200) {
            Object.assign(form, res.data[0])
            form.defaultArea = res.data[0].defaultArea.split(',')
        }
    })
}
onMounted(() => {
    options.length = 0
    getTree().then(res => {
        if (res.code == 200) {
            options.push(...res.data)
        }
    })
    getList()
})
</script>

<style lang="scss" scoped>
.main {
    padding: 0 5px 5px 5px;

    .box-card {
        margin-bottom: 10px;
    }

    .cascaderDiv {
        ::v-deep .el-input__wrapper {
            width: 300px !important;
        }
    }
}
</style>